<template>
  <div>
    <TopBar></TopBar>
    <van-tabs type="card" color="#19a4fc">
      <van-tab title="线上训练">
        <div class="content">
          <div v-for="item in trainingData" :key="item.id">
            <OnlineTrainCard class="OnlineTrainCard" :data="item"></OnlineTrainCard>
          </div>
        </div>
      </van-tab>
      <van-tab title="线下训练">
        <div class="content">
          <div v-for="item in trainData" :key="item.id">
            <TrainCard @Event="parentGetInfo" class="OnlineTrainCard" :data="item"></TrainCard>
          </div>
        </div>
        <van-cell-group class="chart">
          <div class="chart-title">
            <van-icon :name="chartArrow" color="#aaa" size="20" @click="chartShow">
                </van-icon>
            <p>总共￥{{total}}</p>
            <van-button size="mini" type="danger" @click="buy">buy</van-button>
          </div>
          <template v-if="show">
            <template v-for="(v, i) in chartData">
              <van-cell :value="v.name" :key="i">
                <template slot="title">
                  <span>￥{{v.price}}x{{v.count}}</span>
                </template>
              </van-cell>
            </template>
          </template>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import TopBar from '@/components/TopBar.vue'
import OnlineTrainCard from '@/components/OnlineTrainCard.vue'
import TrainCard from '@/components/TrainCard.vue'
export default {
  components: {
    TopBar,
    OnlineTrainCard,
    TrainCard
  },
  data () {
    return {
      trainingData: [],
      trainData: [],
      show: true,
      chartData: [],
      total: 0,
      chartArrow: 'arrow-up'
    }
  },
  mounted () {
    this.$axios
      .get('/api/lists/mod/training')
      .then(result => {
        this.trainingData = result.data
      })
      .catch(err => {
        console.log('err :', err)
      })
    this.$axios
      .get('/api/lists/mod/train')
      .then(result => {
        this.trainData = result.data
      })
      .catch(err => {
        console.log('err :', err)
      })
  },
  methods: {
    parentGetInfo (info) {
      if (this.chartData.length) {
        let flag = this.chartData.some(el => {
          if (el.name === info.name) {
            el.count++
            return true
          }
        })
        if (!flag) {
          this.chartData.push(info)
        }
      } else {
        this.chartData.push(info)
      }
      this.chartData.forEach(el => {
        this.total += parseFloat(el.price)
      })
    },
    chartShow () {
      this.show = !this.show
      if (this.chartArrow === 'arrow-up') {
        this.chartArrow = 'arrow-down'
      } else {
        this.chartArrow = 'arrow-up'
      }
    },
    buy () {
      if (this.total !== 0) {
        this.$dialog.alert({
          message: '总金额 $' + this.total + ' 确认购买'
        }).then(() => {
          this.$notify({
            message: '购买成功',
            duration: 1000,
            background: '#1989fa'
          })
          this.chartData = []
          this.total = 0
        })
      } else { this.$notify('请选择商品') }
    }
  },
  updated () {
    if (this.chartData.length) {
    }
  }
}
</script>

<style scoped>
.van-tabs {
  margin-top: 60px;
}
.van-tab__pane {
  padding: 1rem;
  margin-bottom: 47px;
}
/* .content{
  background-color: antiquewhite;
} */
.OnlineTrainCard {
  margin-bottom: 0.5rem;
}
.chart {
  position: fixed;
  bottom: 4rem;
  right: 1rem;
  width: 55%;
}
.chart > .van-cell {
  font-size: 0.5rem;
  text-overflow: hidden;
  overflow: hidden;
  white-space: nowrap;
}
.chart-title{
  display: flex;
  align-items: center;
  position: relative;
}
.chart-title>.van-icon{
  margin: 10px;
}
.chart-title>p{
  font-size: 0.9rem;margin: 0;padding: 0;float: right;
}
.chart-title>.van-button{
  position: absolute;
  right: 5px;
}
</style>
